<template>
  <div class="app">
    <div class="contain clearFix">
      <div class="lis">
        <li v-if='$store.state.user.profile.account'><a href=""><i class="iconfont icon-shouji"></i> {{$store.state.user.profile.account}}</a></li>
        <li  v-else><router-link to="/login">请先登录</router-link></li>
        <li v-if='$store.state.user.profile.account' @click="loginout"><a>退出登录</a></li>
        <li  v-else><router-link to="/login">免费注册</router-link></li>
        <li><a href="">我的订单</a></li>
        <li><a href="">会员中心</a></li>
        <li><a href="">帮助中心</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href=""><i class="iconfont icon-shouji"></i> 手机版</a></li>
      </div>
    </div>
  </div>
</template>

<script setup >
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
const route = useRoute()
const loginout =()=>{
 store.commit('user/setUser',{})
 router.push('/login')
}
</script>

<style lang='less' scoped >
li {
  list-style: none;
  float: left;
  
 
  cursor: pointer;

}
.app {
  width: 100%;
  line-height: 53px;
  background-color: #333333;
  color: #cdcdcd;
  text-align: center;
}
.contain {
  .lis {
    float: right;
    a{
    padding:  0 20px;
    border-right: 1px solid #cdcdcd;
    text-decoration: none;
    color: #cdcdcd;}
  }
}
</style>